<template>
	<view class="">
		<view v-if="!showCode" class="body_css">
			<view class="top_css">
				<view class="b_top" />
				<appNav bg-color="transparent" color="#fff" :show-back-icon="false" />
				<view class="b_center">
					<view class="b_user">
						<view class="info_css">
							<view class="b_userInfo">
								<image :src="form.avg" mode="aspectFill" />
							</view>
							<view class="b_name">
								{{ form.nickName ||'-' }}
							</view>
						</view>
					</view>


					<!-- 购票信息填写 -->
					<view class="w_cont">
						<view class="w_top" :style="{ backgroundImage: 'url(' + tab_bg + ')' }">
							<view v-for="(item,index) in topList" :key="index" @click="handleClick(item,index)">
								<view :class="currentIndex === index?'active_li w_sq':'w_sq'">
									{{item.title}}
								</view>
							</view>
						</view>
						<view class="w_bottom">
							<write v-if="currentIndex === 0" ref="writeInfo" @hidePage="hidePage" />
							<phone v-if="currentIndex === 1" ref="phoneInfo" @openFail="openFail"
								@openPass="openPass" />
							<record v-if="currentIndex === 2" ref="recordInfo" />
						</view>
					</view>
					<!-- tab结束 -->
				</view>
			</view>
		</view>

		<view v-if="showCode">
			<!-- 二维码扫描 -->
			<mumu-get-qrcode @success='qrcodeSucess' @error="qrcodeError" />

			<img @click="handleClose" class="clear_img"
				src="https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F7%2F29%2F%E8%B7%AF%E5%BE%84%404x.png"
				alt="" />
		</view>

		<!-- 扫描失败弹框 -->
		<pass ref="passInfo" @closePass="closePass" />
		<fail ref="failInfo" @closeFail="closeFail" />
	</view>
</template>

<script>
	import {
		tickInfo
	} from "@/api/app/index.js"

	import write from "./template/write.vue"
	import phone from "./template/phone.vue"
	import record from "./template/record.vue"
	import fail from "./modal/fail.vue"
	import pass from "./modal/pass.vue"

	import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue'

	var VConsole = require('@/components/vconsole.min.js')

	export default {
		components: {
			write,
			phone,
			record,
			mumuGetQrcode,
			fail,
			pass
		},

		data() {
			return {
				form: {
					nickName: '',
					avg: 'https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F7%2F15%2Favg.png'
				},
				currentIndex: 1,
				topList: [{
						title: '扫一扫核销',
					},
					{
						title: '手机核销',
					}, {
						title: '核销记录',
					},
				],
				tab_bg: '',
				one: 'https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F6%2F27%2F1.png',
				two: 'https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F6%2F27%2F2.png',
				three: 'https://seven-3121.obs.cn-north-4.myhuaweicloud.com/2025%2F6%2F27%2F3.png',
				showCode: false
			}
		},

		onShow() {
			this.tab_bg = this.two
			this.form.nickName = uni.getStorageSync('nickName')
			// var vConsole = new VConsole()
		},
		methods: {
			handleClick(item, index) {
				this.currentIndex = index
				if (index === 0) {
					this.tab_bg = this.one
				} else if (index === 1) {
					this.tab_bg = this.two
					this.$nextTick(() => {
						this.$refs.phoneInfo.form.mobile = ''
					})
				} else {
					this.tab_bg = this.three
					this.$nextTick(() => {
						this.$refs.recordInfo.queryParams.pageNum = 1
						this.$refs.recordInfo.queryParams.name = ''
						this.$refs.recordInfo.getList()
					})
				}
			},

			// 点击扫描二维码
			hidePage() {
				this.showCode = true
			},

			qrcodeSucess(data) {
				this.showCode = false
				tickInfo({
					tickId: data
				}).then(res => {
					this.$nextTick(() => {
						if (res.code === 500) {
							this.$refs.failInfo.open()
						} else {
							this.$refs.passInfo.open()
							this.$refs.passInfo.form = res.data
						}
					})
				})
			},


			qrcodeError(err) {
				uni.showModal({
					title: '摄像头授权失败',
					content: '摄像头授权失败，请检测当前浏览器是否有摄像头权限。',
					success: () => {

					}
				})
				this.showCode = false
			},


			// 手机核验成功弹框
			openPass(data) {
				this.$nextTick(() => {
					this.$refs.passInfo.open()
					this.$refs.passInfo.form = data
				})
			},

			// 手机核验失败弹框
			openFail() {
				this.$nextTick(() => {
					this.$refs.failInfo.open()
				})
			},

			// 关闭弹框清空内容
			closeFail() {
				if (this.currentIndex === 1) {
					this.$nextTick(() => {
						this.$refs.phoneInfo.form.mobile = ''
					})
				}
			},

			closePass() {
				if (this.currentIndex === 1) {
					this.$nextTick(() => {
						this.$refs.phoneInfo.form.mobile = ''
					})
				}
			},

			handleClose() {
				this.showCode = false
				this.currentIndex = 0
				this.tab_bg = this.one
			}
		}
	}
</script>

<style scoped>
	@import url("index.css");
</style>